<template>
  <div>
    <div>
      <el-button type="primary" icon="el-icon-search" @click="onSearchClick()">搜索</el-button>
      <el-input style="width: 30%"
                placeholder="请输入内容(UID/昵称)"
                v-model="inputDesc">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-divider><i class="el-icon-zoom-in"></i></el-divider>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      max-height="950">
      <el-table-column
        prop="uid"
        label="UID">
      </el-table-column>
      <el-table-column
        prop="code"
        label="抽奖码">
      </el-table-column>
      <el-table-column
        prop="finish"
        label="推广">
      </el-table-column>
      <el-table-column
        prop="award"
        label="中奖">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleClick(scope.row)">推广</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      v-show="allSize > 30"
      style="margin-top: 20px"
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :total="allSize"
      :page-size="pageSize">
    </el-pagination>
  </div>

</template>

<script>
  const pageSizeConst = 30;
  import axios from 'axios'

  export default {
    created() {
      this.onShareInfo()
    },
    methods: {
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        this.onShareInfo()
      },
      onShareInfo(){
        axios.get("/shareinfo", {
          params: {
            pageSize: pageSizeConst,
            currentPage: this.currentPage,
          }
        }).then(resp => {
          if (resp.data.result) {
            this.tableData = resp.data.msg.data
            this.allSize = resp.data.msg.count
          }
        })
      },
      onSearchClick() {
        axios.get("/searshareinfo", {
          params: {
            param: this.inputDesc
          }
        }).then(resp => {
          if (resp.data.result) {
            this.tableData = [resp.data.msg]
          }
        })
        //搜索
      },
      handleClick(row) {
        axios.get("/shareoperation", {
          params: {
            uid: row.uid
          }
        }).then(resp => {
          if (resp.data.result) {
            this.$message({
              type: 'success',
              message: resp.data.msg
            });
          } else {
            this.$message({
              type: 'success',
              message: resp.data.error
            });
          }
        }).catch(() => {
          console.log('取消');
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    },
    data() {
      return {
        tableData: [],
        inputDesc: '',
        allSize: 0,
        currentPage: 1,
        pageSize: pageSizeConst,
      }
    }
  }
</script>

<style scoped>

</style>
